<!DOCTYPE html>
<html>
	
	
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		
		
		<div  id="app">
			
			<div >
				<router-link    to="/home">用户信息</router-link>
				<router-link   to="/dog">员工信息</router-link>
				<router-link   to="/humer">人的信息</router-link>
				<router-view></router-view>
				
			</div>
			
			
			
		</div>
		
		
		<template  id="homeTemp">
			<div>
				<table id="table1"  border="1"  width="700">
				   <tr  align="center">
				   	 <td>ID编号</td>
				   	 <td>名称</td>
				   	 <td>年龄</td>
				   	 <td>性别</td>
				   	<!-- <td>修改操作</td>
				   	 <td>删除操作</td>
				   	 <td>添加操作</td> -->
				    </tr>
				    <tr  v-for="item  in  user"  align="center">
				   	 <td   v-text="item.id"  ></td>
				   	 <td  v-text="item.name"></td>
				   	 <td  v-text="item.age"></td>
				   	 <td  v-text="item.sex"></td>
				   	 <!--<td  ><button  @click="updateUser(item)">修改</button></td> -->
				   	 <!-- <td  ><button  @click="deleteUser(item.id)">删除</button></td> -->
				   	 <!-- <td  ><button @click="">添加</button></td> -->
				   </tr>
				   
				   
			   </table>
			</div>
		</template>
		
		<template  id="dogTemp">
			<div>
				<table id="table1"  border="1"  width="700">
					   <tr  align="center">
						 <td>ID</td>
						 <td>firstName</td>
						 <td>lastName</td>
						 <td>email</td>
					    </tr>
						<tr  v-for="item  in  employee"  align="center">
						 <td   v-text="item.id"  ></td>
						 <td  v-text="item.firstName"></td>
						 <td  v-text="item.lastName"></td>
						 <td  v-text="item.email"></td>
						</tr>
			    </table>
			</div>
		</template>
		
		
		<template id="="humerTem">
			<div>
				<router-link    to="/humer/diqiu">地球人</router-link>
				<router-link   to="/humer/huoxing">火星人</router-link>
				<router-view></router-view>
			</div>
		</template>
		
		<template  id="diqiuTem">
			<div>
				<h1>我是地球人</h1>
			</div>
		</template>
		
		<template  id="huoxingTem">
			<div>
				<h1>我是火星人</h1>
			</div>
		</template>
		
		
		
		<script  src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script  src="../js/axios.js"></script>
		
		
		
		<script>
			
			function  fun(){
	
			}
			
			//定义组件变量home组件
			let  homCom={
				data(){
					return  {
						user: ""
					
					}
				},
				mounted() {
					axios.get("http://localhost:8080/user/list").then(result =>{
						   this.user=result.data;
						  
					})
				},
				template: "#homeTemp"
			}
			
			
			//定义dog组建
			let  dogCom={
				data(){
					return  {
						employee:  ''
					}
				},
				mounted() {
					axios.get("http://localhost:9090/employee/list").then(result =>{
						   this.employee=result.data;
					})
				},
				template: "#dogTemp"
				
			}
			
		
		    let humer={
				template: "#humerTem"
			}
		
		    let  diqiu={
				template: "#diqiuTem"
			}
		
		
		    let    huoxing={
				template: "#huoxingTem"
			}
		
		
		    
		    const  router=new  VueRouter({
		    	    routes: [
		    			     {path: "/home",component: homCom},
		    				 {path: "/dog",component: dogCom},
							 {path: "/humer",component: humer,
							     children: [
									 {path: "/humber/diqiu",component: diqiu},
									 {path: "/humber/huoxing",component: huoxing}
							     ]}
		    				]
		    })
		    
		    
		
			
			const  app=new  Vue({
				   el: "#app",
				   router
				   
			})
			
			
			
		</script>
		
	</body>
	
	
	
</html>
